<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/mcss/mregistered.css">
    <title>登录</title>
    <style>
        body{
            margin:0 !important
        }
        .loading {
            background-color: #f2f2f2;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background-size:cover;
            position:fixed
        }
        .loading .loadingHead {
            width: 100%;
            display: flex;
            height: 4.1065rem;
            background: white;
            box-shadow: 0 0 40px #e4e4e4;
            padding-right: 1.3462rem;
            padding-left: 1.3162rem;
            box-sizing: border-box;
        }
        .loading .loadingHead .head {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding-top: 0.60rem;
            padding-bottom: 0.57rem;
            box-sizing: border-box;
        }

        .loading .loadingHead .head img:nth-child(1) {
            height: 80%;
            width: 6rem;
            position: relative;
            transform: translateY(20%)
        }

        .loading .loadingHead .head img:nth-child(2) {
            height: 80%;
            width: 2.35rem;
            position: relative;
            transform: translateY(20%)
        }

        .loading .loadmiddle {
            min-height: 10.2648rem;
            background: url('/mimage/start.png') no-repeat center center;
            background-size: 100%;
            transform: scale(0.7);
            background-position: 0 58%;
        }

        .loading .registeredbody {
            background-color: #f2f2f2;
        }

        .loading .register-container {
            padding: 0 1.3162rem 0px 1.3162rem;
        }

        .loading .form-item {
            margin-bottom: 1.3951rem;
            display: flex;
            width: 100%;
        }

        .loading .form-iput {
            height: 3.3431rem;
            position: relative;
        }

        .loading .form-iput input {
            width: 100%;
            height: 100%;
            padding: 0.2105rem 1.2635rem;
            line-height: 3.3431rem;
            border: 1px solid white;
            font-size: 1.1rem;
        }

        .loading .form-checkbox {
            align-items: center;
            flex-direction: row-reverse;
            color: #89917a;
            font-size: 1rem;
        }
        .loading .register-container .form-checkbox>a{
            text-decoration: none;
            color: #89917a;
            font-size: 1rem !important;
        }
        .loading .form-checkbox .agreebox {
            width: 1.02rem;
            height: 1.02rem;
            border: 1px solid #8b8b8b;
            margin-right: 0.6054rem;
            transform: all 0.2s linear;
            position: relative;
        }

        .loading .register-container .form-checkbox>span,
        .loading .register-container .form-checkbox>a {
            font-size: 0.816rem;
        }

        .loading .register-container .form-checkbox .protocol {
            color: #92a47c;
        }

        .loading .register-container .agreebox.checked {
            background-color: #59ff61;
        }

        .loading .register-container .agreebox.checked .agreeicon {
            position: absolute;
            top: 44%;
            left: 52%;
            transform: translate(-50%, -52%) rotate(38deg);
            width: 0.204rem;
            height: 0.612rem;
            border-bottom: 2px solid #fff;
            border-right: 2px solid #fff;
        }
        .loading .submitbtn {
            display: block;
            border: none;
            outline: none;
            width: 100%;
            height: 3.3694rem;
            text-align: center;
            line-height: 3.3694rem;
            margin-bottom: 1.5267rem;
            font-size: 1.3rem;
            text-decoration: none;
        }
        .loading .registerbtn {
            /* background: linear-gradient(to right, #b4d181, #9fdf7f, #5cfc68); */
            background: linear-gradient(to right, #5bcc98, #2fb184);
            color: #fff;
        }

        .loading .loginbtn {
            background: #d3d3d3;
            color: #787878;
        }
        .loading .form-iput span{
            width: 96%;
            height: 100%;
            line-height: 3.3431rem;
            font-size: 1.1rem;
            padding-left: 1rem;
            color: red;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            display: none;
        }
        input::-webkit-input-placeholder{
            color:#ababab;
        }
    </style>
</head>

<body>
    <div class="loading">
        <div class="loadingHead">
            <div class="head">
                <img src="/mimage/logo.png" alt="" @click="returone">
                <img src="/mimage/mylogo.png" alt="" @click="Jump" >
            </div>
        </div>
        <div class="loadmiddle"></div>
        <div class="register-container">
            <div class="register-box">
                <div class="form-item form-iput">
                    <input type="text" v-model="emailnumber" placeholder="请输入邮箱" />
                    <span class="prompt" @click="prompts()" v-html="prompt"></span>
                </div>
                <div class="form-item form-iput">
                    <input type="password" v-model="password" placeholder="请输入密码" />
                    <span class="prompt1" @click="prompts()" v-html="prompt1"></span>
                </div>
                <div class="form-item form-checkbox">
                    <a href="/m/forget">忘记密码？</a>
                </div>
                <button class="submitbtn registerbtn" @click="login()">登陆</button>
                <a href="/m/mregistered" class="submitbtn loginbtn">立即注册</a>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '.loading',
        data() {
            return {
                prompt:'',
                prompt1:'',
                istrue: false,
                emailnumber: '', //登录邮箱
                password: '', //登录密码
                inputtext: {
                    email: '',//邮箱
                    password: '',//一次密码
                    rpassword: '',//二次密码
                },
                formInline: {
                    isagree: false, //是否同意协议
                }
            };
        },
        created() {
            this.setRem(28.43);
            this.fontSize(200);
        },
        methods: {
            returone(){
                window.location.href='/m'
            },
            Jump(){
                window.location.href="/m/mregistered"
            },
            prompts(){
                document.getElementsByClassName("prompt")[0].style.display = "none";
                document.getElementsByClassName("prompt1")[0].style.display = "none";
            },
            login() {//请求登录
                    this.istrue = true
                    if (this.emailnumber == "") {
                        this.prompt="账号不能为空"
                        document.getElementsByClassName("prompt")[0].style.display = "block";
                        let timer=setInterval(() => {
                            this.prompts()
                            clearInterval(timer)
                            timer=null
                        },2000)
                        this.istrue = false
                        return
                    }else if(this.password == ""){
                        this.prompt1="密码不能为空"
                        document.getElementsByClassName("prompt1")[0].style.display = "block";
                        let timer=setInterval(() => {
                            this.prompts()
                            clearInterval(timer)
                            timer=null
                        },2000)
                    }else {
                        axios.post('/yesUser/eamilcheck',{ email: this.emailnumber }).then(res => {
                        if(res.data.code == 200){
                            this.prompt="邮箱不存在"
                            document.getElementsByClassName("prompt")[0].style.display = "block";
                            this.emailnumber=""
                            this.password=""
                            let timer=setInterval(() => {
                            this.prompts()
                            clearInterval(timer)
                            timer=null
                            },2000)
                            this.istrue = false
                            return
                        }else if(res.data.code == -10002){
                            let params = {
                                email: this.emailnumber,
                                password: this.password
                            }
                            axios.post("/yesUser/signin", params).then(res => {
                                if (res.data.code == 200) {
                                        localStorage.setItem('emailnumber',this.emailnumber,7); //保存帐号到cookie，有效期7天
                                        localStorage.setItem('password',this.password,7);
                                        let data = res.data.data
                                        localStorage.setItem('Email', data.email)
                                        localStorage.setItem('user', data.nickname)
                                        localStorage.setItem('ID', data.userId)
                                        localStorage.setItem('mytoken', data.token)
                                        location.href = '/m'
                                } else if (res.data.code == -10005) {
                                    this.prompt1="您输入的密码有误"
                                    document.getElementsByClassName("prompt1")[0].style.display = "block";
                                    this.password=""
                                    let timer=setInterval(() => {
                                    this.prompts()
                                    clearInterval(timer)
                                    timer=null
                                    },2000) 
                                }
                                this.istrue = false
                                this.istruee = false
        
                            })
                        }
                    })
                    }
                    
            },
            setRem(itemNum) {
                //设置字体rem
                let size = itemNum || 38;
                window.onresize = remSize;
                remSize();
                function remSize() {
                    let html = document.getElementsByTagName("html")[0],
                        w = html.clientWidth;
                    w = w > 768 ? 768 : w;
                    html.style.fontSize = w / size + "px";
                }
            },
            fontSize(itemnum) {
                let html = document.getElementsByTagName("html")[0];
                let a = html.style.fontSize;
            }
        }
    })
</script>

</html>